/**
 * Copyright (c) 快宝网络 kuaidihelp.com Co., Ltd. All Rights Reserved 禁止外泄以及用于其它的商业用途
 */

import React, { useRef, useEffect, useState } from 'react';
import DragTable from '@/components/DragTable';
import ProTable from '@ant-design/pro-table';
import type { ActionType } from '@ant-design/pro-table';
import type { ConnectState } from '@/models/connect';
import { useSelector } from 'umi';
import KbAddSmsModalForm from '../components/KbAddSmsDrawerForm';
import { getMarketSmsList } from '../../../../../services/ad/marketingSms';
import { Button, message } from 'antd';
import { columns } from '../../utils/ad.marketingSms';
import type { TableColumnsItem } from '../../utils/type';

const AmountCashVerify = (props: { show: boolean }) => {
  const { show } = props;
  const { winSize } = useSelector((state: ConnectState) => state.global);
  const [visible, setVisible] = useState<boolean>(false);
  const [smsId, setSmsId] = useState<string>('');
  const actionRef = useRef<ActionType>();

  const handleOpenModal = (id: string) => {
    setSmsId(id);
    setVisible(true);
  };

  const handleCloseModal = () => setVisible(false);

  const getList = (params: any) => {
    const { current: page_num, pageSize: page_size } = params;
    return getMarketSmsList({ page_num, page_size, status: 'build' }).then((res) => {
      const { code, data, msg } = res;
      if (code == 0) {
        return {
          data: data.list,
          total: data.total_count,
        };
      } else {
        message.error(msg);
        return { data: [] };
      }
    });
  };

  useEffect(() => {
    if (show) {
      actionRef.current?.reload();
    }
  }, [show]);

  return (
    <DragTable>
      <ProTable<TableColumnsItem>
        rowKey='id'
        className='kb-pro-table'
        actionRef={actionRef}
        pagination={{
          pageSize: 20,
          showQuickJumper: false,
          showSizeChanger: false,
        }}
        request={getList}
        columns={[
          ...columns,
          {
            title: '操作',
            dataIndex: 'operate',
            align: 'center',
            search: false,
            fixed: 'right',
            width: winSize === 'xs' ? 80 : 140,
            render: (_, record) => <a onClick={handleOpenModal.bind(null, record.id)}>发送短信</a>,
          },
        ]}
        options={false}
        scroll={{ x: 620 }}
        search={{
          optionRender: () => [
            <Button key={'export'} type='primary' onClick={handleOpenModal.bind(null, '')}>
              自主导入发送
            </Button>,
          ],
        }}
      />
      <KbAddSmsModalForm
        visible={visible}
        id={smsId}
        actionRef={actionRef}
        onCancel={handleCloseModal}
        winSize={winSize}
      />
    </DragTable>
  );
};

export default AmountCashVerify;
